<template>
  <div class="cart">
    <el-container>
      <el-main>
        <div class="main-con">
          <div class="cart-header">
            <div class="cart-header-info">
              <p><i class="el-icon-shopping-cart-full"></i>我的购物车</p>
              <span
                >温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span
              >
            </div>
          </div>
          <div class="cart-content" v-if="shoppingcart.length > 0">
            <ul>
              <li class="cart-con-header">
                <div class="cart-checked">
                  <el-checkbox
                    v-model="checkAll"
                    @change="handleCheckAllChange($event)"
                    >全选</el-checkbox
                  >
                </div>
                <div class="cart-img"></div>
                <div class="cart-name">商品名称</div>
                <div class="cart-price">单价</div>
                <div class="cart-count">数量</div>
                <div class="cart-total">小计</div>
                <div class="cart-operate">操作</div>
              </li>
              <li
                class="cart-con-list"
                v-for="(item, index) in shoppingcart"
                :key="index"
              >
                <div class="cart-checked">
                  <el-checkbox-group
                    v-model="item.checked"
                    @change="handleCheckedChange($event, item)"
                  >
                    <el-checkbox :data="item.id"></el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="cart-img">
                  <img v-lazy="item.product_picture" alt="" />
                </div>
                <div class="cart-name">{{ item.product_name }}</div>
                <div class="cart-price">{{ item.product_selling_price }}元</div>
                <div class="cart-count">
                  <el-input-number
                    size="small"
                    v-model="item.count"
                    @change="handleChange($event, item.id)"
                    :min="1"
                  ></el-input-number>
                </div>
                <div class="cart-total">
                  <span>{{ item.product_selling_price * item.count }}元</span>
                </div>
                <div class="cart-operate">
                  <el-popconfirm
                    title="确定要删除该商品吗？"
                    @confirm="deleteShoppingCart(item.id)"
                  >
                    <el-button slot="reference">删除</el-button>
                  </el-popconfirm>
                </div>
              </li>
            </ul>
            <div class="con-footer">
              <ul class="footer-left">
                <li class="left-go">
                  <router-link to="/home">继续购物</router-link>
                </li>
                <li class="left-ge">|</li>
                <li class="left-compute">
                  共<span>{{ getCount }}</span
                  >件商品，已选择<span>{{ getKind }}</span
                  >件
                </li>
              </ul>
              <ul class="footer-right">
                <li>
                  合计：
                  <p>
                    <span>{{ getTotal }}</span>
                    <!-- <span>{{ total }}</span
                    > -->
                    元
                  </p>
                </li>
                <li>
                  <el-button type="warning" plain>去结算</el-button>
                </li>
              </ul>
            </div>
          </div>
          <!-- 没有商品时 -->
          <div class="cart-content-no" v-else>
            <h2>您还没有添加商品哦！</h2>
            <p @click="gogowu">点击去购物</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      checkAll: false,
      shoppingcart: [],
    };
  },
  created() {
    this.getShoppingCart();
    this.setShoppingCart();
  },
  methods: {
    ...mapActions({
      setShoppingCart: {
        type: "cart/setShoppingCart",
        // payload: null,
      },
    }),
    gogowu() {
      this.$router.push("/home");
    },
    async getShoppingCart() {
      // console.log(JSON.parse(sessionStorage.getItem("user")).id);
      const res = await this.$http.getShoppingCarts(
        JSON.parse(sessionStorage.getItem("user")).id
      );
      // console.log(res);
      this.shoppingcart = res.data;
    },
    async handleChange(value, id) {
      await this.$http.patchShoppingCart({
        id: id,
        count: value,
      });
    },
    async deleteShoppingCart(id) {
      await this.$http.deleteShoppingCart(id);
      this.getShoppingCart();
      this.setShoppingCart();
    },
    // 全选
    handleCheckAllChange(val) {
      this.shoppingcart.forEach((item) => {
        item.checked = val;
      });
    },
    handleCheckedChange(value, item) {
      let checkedTrue = [];
      let checkedFalse = [];
      this.shoppingcart.forEach((item) => {
        if (item.checked) {
          checkedTrue.push(item);
        } else {
          checkedFalse.push(item.checked);
        }
      });
      if (checkedTrue.length === this.shoppingcart.length) {
        this.checkAll = item.checked = value;
      } else {
        this.checkAll = false;
      }
    },
  },
  computed: {
    getTotal() {
      let total = 0;
      this.shoppingcart.forEach((item) => {
        if (item.checked) {
          total += item.product_selling_price * item.count;
        }
      });
      return total;
    },
    getCount() {
      let count = 0;
      this.shoppingcart.forEach((item) => {
        count += item.count;
      });
      return count;
    },
    getKind() {
      let kind = 0;
      this.shoppingcart.forEach((item) => {
        if (item.checked) {
          kind += item.count;
        }
      });
      return kind;
    },
  },
};
</script>
<style lang="scss">
.cart {
  .el-container {
    .el-main {
      min-height: 300px;
      padding: 20px 0;
      .main-con {
        background-color: #f5f5f5;
        padding-bottom: 20px;
        .cart-header {
          height: 64px;
          border-bottom: 2px solid #ff6700;
          background-color: #fff;
          margin-bottom: 20px;
          .cart-header-info {
            width: 1225px;
            margin: 0 auto;
            p {
              font-size: 28px;
              line-height: 64px;
              float: left;
              color: #424242;
              margin: 0 !important;
              i {
                color: rgb(255, 103, 0);
                font-weight: 600;
              }
            }
            span {
              color: #757575;
              font-size: 12px;
              float: left;
              height: 20px;
              line-height: 20px;
              margin-top: 30px;
              margin-left: 15px;
            }
          }
        }
        .cart-content {
          width: 1225px;
          margin: 0 auto;
          ul {
            .cart-con-list {
              padding: 15px 0;
              margin-top: 2px;
            }
            li {
              height: 85px;
              line-height: 85px;
              background-color: #fff;
              div {
                float: left;
              }
              .cart-checked {
                width: 110px;
                .el-checkbox {
                  margin-left: 24px;
                }
              }
              .cart-img {
                width: 120px;
                height: 86px;
                img {
                  width: 80px;
                  height: 80px;
                }
              }
              .cart-name {
                width: 380px;
              }
              .cart-price {
                width: 158px;
                text-align: center;
              }
              .cart-count {
                width: 150px;
                text-align: center;
                .el-input-number {
                  margin: 26px 0;
                }
              }
              .cart-total {
                width: 120px;
                text-align: right;
                padding-right: 81px;
                span {
                  color: #ff6700;
                }
              }
              .cart-operate {
                width: 80px;
                text-align: center;
                .tooltip {
                  display: block !important;
                }
              }
            }
          }
          .con-footer {
            width: 1225px;
            margin: 0 auto;
            margin-top: 20px;
            height: 50px;
            background: #fff;
            color: #757575;
            .footer-left {
              float: left;
              li {
                float: left;
                height: 50px;
                line-height: 50px;
              }
              .left-go {
                margin-left: 32px;
              }
              .left-ge {
                margin: 0 20px;
              }
              .left-compute {
                span {
                  color: #ff6700;
                }
              }
            }
            .footer-right {
              float: right;
              li {
                float: left;
                height: 50px;
                line-height: 50px;
                color: #ff6700;
                font-size: 14px;
                p {
                  display: inline-block;
                  margin: 0;
                  font-size: 30px;
                }
                .el-button {
                  border: none;
                  width: 200px;
                  height: 50px;
                  margin-left: 50px;
                }
                .el-button--warning.is-plain {
                  font-size: 16px;
                }
              }
            }
          }
        }
        .cart-content-no {
          height: 300px;
          padding: 0 0 130px 558px;
          margin: 65px 0 0;
          color: #b0b0b0;
          overflow: hidden;
          background: url(../../assets/imgs/cart-empty.png) no-repeat 124px 0;
          h2 {
            margin: 70px 0 15px;
            font-size: 36px;
          }
          p {
            margin: 0 0 20px;
            font-size: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
